<template>
	<view class="guide-container">
		<view class="guide-header">
			<text class="guide-title">如何获得积分</text>
			<text class="guide-subtitle">多种方式轻松赚取积分</text>
		</view>

		<view class="guide-list">
			<view v-for="item in guideItems" :key="item.type" class="guide-item" @click="handleGuideClick(item)">
				<view class="guide-icon" :style="{ background: item.color }">
					{{ item.icon }}
				</view>
				<view class="guide-content">
					<text class="guide-name">{{ item.name }}</text>
					<text class="guide-desc">{{ item.description }}</text>
				</view>
				<view class="guide-reward">
					<text class="reward-text">+{{ item.points }}</text>
				</view>
			</view>
		</view>

		<!-- 积分规则说明 -->
		<view class="rules-section">
			<text class="rules-title">积分规则</text>
			<view class="rules-list">
				<text class="rule-item">• 积分可用于商品兑换，一经使用不可恢复</text>
				<text class="rule-item">• 每日签到可获得基础积分奖励</text>
				<text class="rule-item">• 高质量内容获得的点赞和收藏会有额外奖励</text>
				<text class="rule-item">• 参与官方活动可获得丰厚积分奖励</text>
			</view>
		</view>

		<!-- 会员等级说明 -->
		<!-- <view class="level-section">
			<text class="level-title">会员等级</text>
			<view class="level-list">
				<view v-for="level in memberLevels" :key="level.level" class="level-item">
					<view class="level-info">
						<text class="level-name">{{ level.name }}</text>
						<text class="level-requirement">{{ level.requirement }}</text>
					</view>
					<view class="level-benefits">
						<text v-for="benefit in level.benefits" :key="benefit" class="benefit-tag">
							{{ benefit }}
						</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 今日任务 -->
		<!-- <view class="tasks-section">
			<text class="tasks-title">今日任务</text>
			<view class="task-list">
				<view v-for="task in dailyTasks" :key="task.id" class="task-item" :class="{ completed: task.completed }"
					@click="handleTaskClick(task)">
					<view class="task-icon" :style="{ background: task.color }">
						{{ task.icon }}
					</view>
					<view class="task-content">
						<text class="task-name">{{ task.name }}</text>
						<text class="task-progress">{{ task.progress }}/{{ task.target }}</text>
					</view>
					<view class="task-reward">
						<text class="task-points">+{{ task.points }}</text>
						<text class="task-status">{{ task.completed ? '已完成' : '进行中' }}</text>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'

	// 积分获取方式
	const guideItems = ref([
		{
			type: 1,
			name: '每日签到',
			description: '每天签到获得基础积分',
			icon: '📅',
			color: 'linear-gradient(135deg, #667eea, #764ba2)',
			points: 1
		},
		{
			type: 2,
			name: '发布帖子',
			description: '分享优质内容获得奖励',
			icon: '📝',
			color: 'linear-gradient(135deg, #4ecdc4, #44a08d)',
			points: 1
		},
		{
			type: 3,
			name: '参与答题',
			description: '完成答题挑战赚取积分',
			icon: '📋',
			color: 'linear-gradient(135deg, #ff6b6b, #ffa726)',
			points: 15
		},
		{
			type: 4,
			name: '获得点赞',
			description: '内容受欢迎获得额外奖励',
			icon: '👍',
			color: 'linear-gradient(135deg, #ffd54f, #ffb300)',
			points: 1
		},
		{
			type: 5,
			name: '内容被收藏',
			description: '高质量内容被收藏奖励',
			icon: '⭐',
			color: 'linear-gradient(135deg, #ba68c8, #9c27b0)',
			points: 1
		},
		{
			type: 6,
			name: '发表评论',
			description: '积极参与讨论获得积分',
			icon: '💬',
			color: 'linear-gradient(135deg, #42a5f5, #1976d2)',
			points: 1
		}
	])

	// 会员等级
	const memberLevels = ref([
		{
			level: 0,
			name: 'LV0 普通会员',
			requirement: '0积分',
			benefits: ['基础功能']
		},
		{
			level: 1,
			name: 'LV1 青铜会员',
			requirement: '100积分',
			benefits: ['签到奖励+20%', '专属头像框']
		},
		{
			level: 2,
			name: 'LV2 白银会员',
			requirement: '500积分',
			benefits: ['签到奖励+50%', '优先客服', '专属标识']
		},
		{
			level: 3,
			name: 'LV3 黄金会员',
			requirement: '1000积分',
			benefits: ['签到奖励+100%', '专属客服', '高级功能']
		},
		{
			level: 4,
			name: 'LV4 钻石会员',
			requirement: '2000积分',
			benefits: ['签到奖励+150%', 'VIP专区', '专属活动']
		},
		{
			level: 5,
			name: 'LV5 至尊会员',
			requirement: '5000积分',
			benefits: ['签到奖励+200%', '全部特权', '专属定制']
		}
	])

	// 每日任务
	const dailyTasks = ref([
		{
			id: 1,
			name: '每日签到',
			progress: 1,
			target: 1,
			points: 10,
			icon: '📅',
			color: 'linear-gradient(135deg, #667eea, #764ba2)',
			completed: true
		},
		{
			id: 2,
			name: '发布帖子',
			progress: 0,
			target: 1,
			points: 20,
			icon: '📝',
			color: 'linear-gradient(135deg, #4ecdc4, #44a08d)',
			completed: false
		},
		{
			id: 3,
			name: '参与答题',
			progress: 2,
			target: 3,
			points: 15,
			icon: '📋',
			color: 'linear-gradient(135deg, #ff6b6b, #ffa726)',
			completed: false
		},
		{
			id: 4,
			name: '发表评论',
			progress: 3,
			target: 5,
			points: 10,
			icon: '💬',
			color: 'linear-gradient(135deg, #42a5f5, #1976d2)',
			completed: false
		}
	])

	// 处理指南项点击
	const handleGuideClick = (item : any) => {
		uni.showModal({
			title: item.name,
			content: `${item.description}\n奖励：+${item.points}积分`,
			showCancel: false,
			confirmText: '我知道了'
		})
	}

	// 处理任务点击
	const handleTaskClick = (task : any) => {
		if (task.completed) {
			uni.showToast({
				title: '任务已完成',
				icon: 'success'
			})
		} else {
			uni.showModal({
				title: '完成任务',
				content: `继续完成"${task.name}"任务，还需${task.target - task.progress}次`,
				showCancel: false,
				confirmText: '去完成'
			})
		}
	}

	onMounted(() => {
		// 这里可以加载用户的任务完成情况
		console.log('积分指南页面加载完成')
	})
</script>

<style lang="scss" scoped>
	.guide-container {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.guide-header {
		margin-bottom: 30rpx;
		text-align: center;

		.guide-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
			display: block;
		}

		.guide-subtitle {
			font-size: 24rpx;
			color: #666;
		}
	}

	.guide-list {
		margin-bottom: 40rpx;
	}

	.guide-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f8f8f8;

		&:last-child {
			border-bottom: none;
		}

		.guide-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			margin-right: 20rpx;
		}

		.guide-content {
			flex: 1;

			.guide-name {
				display: block;
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 6rpx;
			}

			.guide-desc {
				font-size: 24rpx;
				color: #666;
			}
		}

		.guide-reward {
			.reward-text {
				font-size: 24rpx;
				font-weight: bold;
				color: #667eea;
			}
		}
	}

	.rules-section,
	.level-section,
	.tasks-section {
		margin-bottom: 40rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.rules-title,
	.level-title,
	.tasks-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.rules-list {
		.rule-item {
			display: block;
			font-size: 24rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 10rpx;
		}
	}

	.level-list {
		.level-item {
			padding: 20rpx;
			background: #f8f9ff;
			border-radius: 16rpx;
			margin-bottom: 15rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.level-info {
				margin-bottom: 15rpx;

				.level-name {
					display: block;
					font-size: 26rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 6rpx;
				}

				.level-requirement {
					font-size: 22rpx;
					color: #667eea;
				}
			}

			.level-benefits {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.benefit-tag {
					padding: 6rpx 12rpx;
					background: #667eea;
					color: white;
					font-size: 20rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	.task-list {
		.task-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #f8f9ff;
			border-radius: 16rpx;
			margin-bottom: 15rpx;
			transition: all 0.3s ease;

			&:last-child {
				margin-bottom: 0;
			}

			&.completed {
				background: #f0f9f0;
				opacity: 0.8;
			}

			.task-icon {
				width: 50rpx;
				height: 50rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				margin-right: 20rpx;
			}

			.task-content {
				flex: 1;

				.task-name {
					display: block;
					font-size: 26rpx;
					font-weight: 500;
					color: #333;
					margin-bottom: 6rpx;
				}

				.task-progress {
					font-size: 22rpx;
					color: #666;
				}
			}

			.task-reward {
				text-align: right;

				.task-points {
					display: block;
					font-size: 24rpx;
					font-weight: bold;
					color: #667eea;
					margin-bottom: 4rpx;
				}

				.task-status {
					font-size: 20rpx;
					color: #999;
				}
			}
		}
	}
</style>